<template>
	<view>
		<!-- 头部 -->
		<view class="navbar">
			<view class="nav-left"><u-icon name="arrow-left" color="#000" size="30"></u-icon></view>
			<view class="nav-center">{{ headtitle }}</view>
			<view class="nav-right">
				<u-icon class="iocn-search" name="search" color="#000" size="30"></u-icon>
				<u-icon class="iocn-move" size="30" name="../../static/icon/更多.png"></u-icon>
			</view>
		</view>
		<!-- 	标题 -->
		<view class="cover">
			<view class="cover-img"><image class="img" :src="background_head" mode=""></image></view>
			<view class="cover-title">
				<view class="cover-detail">{{ detail }}</view>
				<!-- 封面 -->
				<view class="cover-user">
					<view class="cover-media">
						<view><image class="user-img" :src="userimg" mode=""></image></view>
						<view class="user-name">{{ creator }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cover-box"></view>
		<!-- 背景虚化 -->
		<view class="head-bg" :style="{ background: 'url(' + background_head + ')' }"></view>
		<!-- 	按钮 -->
		<!-- 添加数量 -->
		<view class="shadow">
			<view class="shadow-iocn">
				<view class="icon-1">
					<view><image class="img" src="../../static/icon/add-3.png" mode=""></image></view>
					<view class="icon-text">{{ subscribedCount | formartNum }}</view>
				</view>
				<!-- 评论 -->
				<view class="icon-2">
					<image @click="msg" class="img" src="../../static/icon/ico-msg.png" mode=""></image>
					<view class="icon-text">{{ commentCount | formartNum }}</view>
				</view>
				<!-- 	分享 -->
				<view class="icon-3">
					<u-icon name="share" color="#000" size="30"></u-icon>
					<view class="icon-text">{{ shareCount | formartNum }}</view>
				</view>
			</view>
		</view>
		<!-- 	播放 -->
		<view class="play-list">
			<view class="list-1">
				<image class="img" src="../../static/icon/play.png" mode=""></image>
				<view class="text">播放全部({{ palycount }})</view>
			</view>
			<!-- 	//icon -->
			<view class="icon">
				<view class="list-2"><image class="img" src="../../static/icon/pull_down.png" mode=""></image></view>
				<view class="list-3"><image class="img" src="../../static/icon/check.png" mode=""></image></view>
			</view>
		</view>
		<!-- 播放列表 -->
		<view class="play-name">
			<view v-for="(items, index) in playname" :key="index" @click="getall(items, index)">
				<view class="name">
					<view class="top">{{ index + 1 }}</view>
					<view class="song-name">
						{{ items.name }}
						<view class="singer">{{ items.ar[0].name }}--{{ items.al.name }}</view>
					</view>
					<view class="right">
						<image v-if="items.mv != 0" class="img" src="../../static/icon/play1.png" mode=""></image>
						<image class="img" src="../../static/icon/more.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<songplay :pic="msgsong.picUrl" :names="msgsong.name"></songplay>
	</view>
</template>
<script >
import { mapState, mapMutations } from 'vuex'; //vuex
import { song_palylist, song_detail, palylist_track, all_song, songurl } from '@/network/https/api.js'; //请求
import songplay from './songplay.vue';
import { formartNum, songitems, songindex, currentmsg, albumSong } from '@/utils/song.js';
import { playaudio } from '@/utils/player.js';
export default {
	data() {
		return {
			headtitle: '', //标题
			background_head: '', //背景颜色
			trackIds: '', //歌曲信息  //总的数据 暂时未获取
			detail: '', //歌单内容
			creator: '', //歌单的创建者
			userimg: '', //歌单创建人的头像
			subscribedCount: '', //订阅数
			commentCount: '', //评论数量
			shareCount: '', //分享数量
			songs: '', //歌单列表数据
			palycount: '', //播放总数
			playname: [], //
			songid: '', //歌单id
			currentpage: 1, //当前页
			size: 20, //每页数量
			toal: '', //总页数
			pagesize: [], //分割的数组
			index: 0, //下标
			toalpage: '',
			msgsong:''
		};
	},
	onLoad(val) {
		//歌单id
		this.songid = val.id;
		this.songlist(); //传入歌单id
	},
	updated() {},
	onReachBottom() {
		if (this.currentpage > this.toalpage) return;
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		setTimeout(function() {
			uni.hideLoading();
		}, 1000);
		this.songlist();
	},
	methods: {
		//歌单列表
		async songlist() {
			const s = 10;
			// 可选参数 : s : 歌单最近的 s 个收藏者,默认为 8
			const { data: res } = await song_palylist(this.songid, s); //请求
			console.log('完整数组', res);
			this.songs = res; //完整数据
			this.palycount = res.playlist.trackCount; //歌单id
			this.shareCount = res.playlist.shareCount; //分享数量
			this.commentCount = res.playlist.commentCount; //评论数量
			this.subscribedCount = res.playlist.subscribedCount; //添加数量
			this.userimg = res.playlist.creator.avatarUrl; //创建者头像
			this.creator = res.playlist.creator.nickname; //创建者名称
			this.detail = res.playlist.description; //歌单描述
			this.headtitle = res.playlist.name; //歌单标题
			this.background_head = res.playlist.coverImgUrl; //背景，歌单封面
			this.trackIds = res.playlist.trackIds; //未作处理歌曲id
			//处理歌的id
			//方法循环出来然后保存到新建的空的数组
			let listid = []; //处理歌曲id
			this.trackIds.forEach((item, index) => {
				return listid.unshift(item.id);
			});
			//假分页数据处理
			//第一种做法
			//数组分割平均每份几个
			//触底的时候 将分割得到的新数组index下标加或减
			// let count = 50;
			// this.pagesize = [];
			// // console.log(this.index);
			// for (let i = 0; i < listid.length; i += count) {
			// 	this.pagesize.push(listid.slice(i, i + count));
			// }
			// console.log('分割', this.pagesize);
			// if (this.index > this.pagesize.length) return;
			// const { data: songid } = await song_detail(this.pagesize[this.index]); //请求
			//截取的方法
			//数组截取一般从0开始
			//默认开始页码1，页面减1 *每页多少条，页码*每页多少条
			let page = listid.slice((this.currentpage - 1) * this.size, this.currentpage * this.size);
			const { data: songid } = await song_detail(page); //请求
			this.currentpage++, //
				(this.toalpage = Math.ceil(listid.length / this.size));
			this.playname = [...this.playname, ...songid.songs]; //所有歌曲
			console.log('具体信息', songid);
			songitems(this.playname);
			uni.setStorage({
				key:'music',
				data:this.playname,
				success: function () {
						console.log('success');
					}
			})
		},
		async getdata() {},
		//评论
		msg() {
			console.log(this.songid);
			uni.navigateTo({
				url: `/components/common/Comment?id=${this.songid}`
			});
		},
		//mapMutations
		...mapMutations(['_getnames', '_getpicUrl', '_getmp3url', '_songlist', '_songindex', '_playaudio', '_getid', '_player']),

		async getall(item, index) {
			console.log(item)
			uni.$emit('update',{msg:item})
			//存起来index
			
			//index
			songindex(index);
			//存起来名字
			// //存起来图片
			// //id
			this.msgsong = currentmsg(item);
			console.log(this.msgsong)
			//请求
			const { data: res } = await songurl(item.id);
			// //存起来MP3
			playaudio(res.data[0]);
			let ab = albumSong();
			console.log(ab);
			uni.setStorage({
				key:'currentmusic',
				data:item,
				success: () => {
					console.log("成功");
				}
			}),
			uni.setStorage({
				key:'currentindex',
				data:index,
				success: () => {
					console.log("index");
				}
			})
			uni.navigateTo({
				url: `/views/song/index?id=${item.id}`
			});
		}
	},
	//
	computed: {
		...mapState({
			Audio: state => state.player.Audio, //audio实例对象
			mp3: state => state.songs.mp3Url //MP3
		})
	},
	//
	filters: {
		formartNum(val) {
			return formartNum(val);
		}
	},
	components: {
		songplay
	}
};
</script>

<style lang="scss" scoped>
.navbar {
	display: flex;
	margin-top: 30rpx;
	margin-left: 30rpx;
	position: relative;
	align-items: center;
	top: 30rpx;
	.nav-left {
	}
	.nav-center {
		flex: 2;
		font-size: 30rpx;
		margin-left: 30rpx;
		white-space: nowrap;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.nav-right {
		display: flex;
		flex: 1;
		justify-content: flex-end;
		.iocn-search {
			margin-right: 30rpx;
		}
		.iocn-move {
			margin-left: 10rpx;
			margin-right: 10rpx;
		}
	}
}

.cover {
	display: flex;
	height: 600rpx;
	justify-content: center;
	align-items: center;
	margin-left: 30rpx;
	z-index: 5;
	.cover-img {
		flex: 0.7;
		.img {
			width: 250rpx;
			height: 250rpx;
			border-radius: 20rpx;
		}
	}
	.cover-title {
		flex: 1;
		.cover-detail {
			height: 120rpx;
			justify-content: flex-start;
			margin-right: 30rpx;
			font-size: 30rpx;
			color: #ffffff;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3; //2行
			-webkit-box-orient: vertical;
		}
		.cover-user {
			display: flex;
			height: 90rpx;
			justify-content: flex-start;
			.cover-media {
				display: flex;
				.user-img {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
				.user-name {
					line-height: 60rpx;
					text-align: center;
					margin-left: 20rpx;
				}
			}
		}
	}
}
.cover-box {
	width: 320rpx;
	height: 290rpx;
	margin-left: 30rpx;
	z-index: -1;
	position: absolute;
	top: 200rpx;
	background: linear-gradient(360deg, #70415d, #171628);
	border-radius: 30rpx;
	box-shadow: 10rpx 10rpx 3rpx 5rpx #b3b7b5;
}
.head-bg {
	width: 100%;
	height: 550rpx;
	background-size: cover;
	position: absolute;
	top: 100rpx;
	bottom: 0;
	left: 0;
	right: 0;
	filter: blur(60rpx);
	z-index: -1;
}
.shadow {
	width: 100%;
	display: flex;
	justify-content: center;
	.shadow-iocn {
		display: flex;
		align-items: center;
		align-items: center;
		border: 9rpx #ffffff solid;
		border-radius: 50rpx;
		width: 650rpx;
		height: 90rpx;
		background: linear-gradient(#fff, #fff);
		font-size: 30rpx;
		box-shadow: 3rpx 3rpx 10rpx #8e8c94;
		.icon-1 {
			display: flex;
			flex: 1.7;
			margin-left: 20rpx;
			align-items: center;
			.img {
				width: 50rpx;
				height: 50rpx;
				margin-left: 20rpx;
			}
			.icon-text {
				margin-left: 20rpx;
			}
		}
		.icon-2 {
			display: flex;
			flex: 2;
			justify-content: center;
			align-items: center;
			.img {
				width: 60rpx;
				height: 60rpx;
			}
			.icon-text {
				margin-left: 20rpx;
			}
		}
		.icon-3 {
			flex: 2;
			display: flex;
			justify-content: center;
			align-items: center;
			.icon-text {
			}
		}
	}
}

.play-list {
	display: flex;
	.list-1 {
		display: flex;
		align-items: center;
		flex: 1.8;
		margin-left: 20rpx;
		.img {
			width: 60rpx;
			height: 60rpx;
		}
		.text {
		}
	}
	.icon {
		display: flex;
		justify-content: center;
		flex: 0.8;
		margin-top: 20rpx;
		.list-2 {
			.img {
				width: 60rpx;
				height: 60rpx;
			}
		}
		.list-3 {
			margin-left: 20rpx;
			.img {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
}
.play-name {
	display: flex;
	flex-direction: column;
	margin-left: 60rpx;
	padding-bottom: 100rpx;
	.name {
		width: 680rpx;
		height: 100rpx;
		display: flex;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 30rpx;
		flex: 2;
		.song-name {
			width: 500rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			.singer {
				font-size: 23rpx;
				color: #767676;
				width: 400rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.top {
			margin-right: 40rpx;
		}
		.right {
			display: flex;
			flex: 3;
			justify-content: flex-end;
			.img {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
}
</style>
